<template>
  <div>
    <div class="content" v-if="isAuth">
    <search-bar
    :disabled="true"
    @onClick="onSearchBarkClick"
    :hot-search="hotSearch">
    </search-bar>
    <HomeCard
    :data = "homeCard"
    @onClick="onHomeBookClick">
    </HomeCard>
    <home-banner img="../../../static/images/mofei.jpg" subTitle="点击查看" @onClick="onBannerClick"></home-banner>
    <div class="book-home">
      <HomeBook
        title="为你推荐"
        :row="1"
        :col="3"
        :data="recommend"
        mode="col"
        btn-text="换一批"
        @onMoreClick="() => recommendChange('recommend')"
        @onBookClick="onHomeBookClick"
      ></HomeBook>
    </div>
    <div class="book-home">
      <HomeBook
        title="免费阅读"
        :row="2"
        :col="2"
        :data="freeRead"
        mode="row"
        btn-text="换一批"
        @onMoreClick="() => recommendChange('freeRead')"
        @onBookClick="onHomeBookClick"
      ></HomeBook>
    </div>
    <div class="book-home">
      <HomeBook
        title="当前最热"
        :row="1"
        :col="4"
        :data="hotBook"
        mode="col"
        btn-text="换一批"
        @onMoreClick="() => recommendChange('hotBook')"
        @onBookClick="onHomeBookClick"
      ></HomeBook>
    </div>
    <div class="book-home">
      <HomeBook
        title="分类"
        :row="3"
        :col="2"
        :data="category"
        mode="category"
        btn-text="查看全部"
        @onMoreClick="onCategoryMoreClick"
        @onBookClick="onCategoryClick"
      ></HomeBook>
    </div>
  </div>
  <Auth v-if="!isAuth" @getUserInfo='init'></Auth>
  </div>
</template>

<script>
import SearchBar from '../../components/home/SearchBar'
import HomeCard from '../../components/home/HomeCard'
import HomeBanner from '../../components/home/HomeBanner'
import HomeBook from '../../components/home/HomeBook'
import { getHomeData, recommend, freeRead, hotBook, register } from '../../api'
import { getSetting, getUserInfo, setStorageSync, getStorageSync, getUserOpenId, showLoading, hideLoading } from '../../api/wechat'
import Auth from '../../components/base/Auth'
export default {
  components: {
    SearchBar,
    HomeCard,
    HomeBanner,
    HomeBook,
    Auth
  },
  data () {
    return {
      hotSearch: '搜索',
      shelf: [],
      banner: {},
      recommend: [],
      freeRead: [],
      hotBook: [],
      category: [],
      homeCard: {},
      isAuth: true
    }
  },
  methods: {
    recommendChange (key) {
      switch (key) {
        case 'recommend':
          recommend().then(response => {
            this.recommend = response.data.data
          })
          break
        case 'freeRead':
          freeRead().then(response => {
            this.freeRead = response.data.data
          })
          break
        case 'hotBook':
          hotBook().then(response => {
            this.hotBook = response.data.data
          })
          break
      }
    },
    onSearchBarkClick () {
      // 跳转到搜索页
      this.$router.push({
        path: '/pages/search/main',
        query: {
          hotSearch: this.hotSearch
        }
      })
    },
    onBannerClick () {
      // console.log('banner click')
    },
    getHomeData (openId, userInfo) {
      getHomeData({ openId }).then(response => {
        const {
          data: {
            // hotSearch,
            banner,
            recommend,
            freeRead,
            hotBook,
            category,
            shelf,
            shelfCount
          }
        } = response.data
        this.shelf = shelf
        this.banner = banner
        this.recommend = recommend
        this.freeRead = freeRead
        this.hotBook = hotBook
        this.category = category
        this.homeCard = {
          bookList: shelf,
          num: shelfCount,
          userInfo
        }
        hideLoading()
      }).catch(() => {
        hideLoading()
      })
    },
    onCategoryMoreClick () {
      this.$router.push({
        path: '/pages/categoryList/main'
      })
    },
    onHomeBookClick (book) {
      this.$router.push({
        path: '/pages/detail/main',
        query: {
          fileName: book.fileName
        }
      })
    },
    onCategoryClick (category) {
      this.$router.push({
        path: '/pages/list/main',
        query: {
          text: category.category,
          key: 'categoryId',
          title: category.categoryText
        }
      })
    },
    getUserInfo () {
      const onOpenIdComplete = (openId, userInfo) => {
        this.getHomeData(openId, userInfo)
        register(openId, userInfo)
      }
      getUserInfo(
        (userInfo) => {
          console.log(userInfo)
          setStorageSync('userInfo', userInfo)
          const openId = getStorageSync('openId')
          if (!openId || openId.length === 0) {
            getUserOpenId(openId => onOpenIdComplete(openId, userInfo))
          } else {
            onOpenIdComplete(openId, userInfo)
          }
        },
        () => {
          console.log('failed...')
        }
      )
    },
    getSetting () {
      getSetting('userInfo',
        () => {
          this.isAuth = true
          showLoading('正在加载')
          this.getUserInfo()
        },
        () => {
          this.isAuth = false
        }
      )
    },
    init () {
      this.getSetting()
    }
  },
  mounted () {
    // this.getHomeData()
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.book-home {
  margin-top: 20px; 
}
</style>
